<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>个人配置</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<link type="text/css" rel="stylesheet" href="css/personlike.css" />
	<link type="text/css" rel="stylesheet" href="css/jquery.Jcrop.css" />
	<link type="text/css" rel="stylesheet" href="css/uploadify.css" />
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker-zh-CN.js"></script>
	<script type="text/javascript" src="../js/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="../js/popeScroll.js"></script>
	<script type="text/javascript" src="js/jquery.tabswitch.js"></script>
	<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript" src="js/jquery.uploadify.v2.1.4.js"></script>
	<script language="JavaScript" type="text/JavaScript">
		var userJson;
		var tabnum = 0;
		var maxtabnum = 2;
		var mininum = 1;
		var maxmininum = 7;
		var wpindex = 1;
		var isRealSize = false;
		var realWidth = 0;
		var realHeight = 0;
		
		$(document).ready(function() {
			$(window).resize(function() {
				refresh();
			});
			refresh();	
			var parwinwidth = $(window).width();
			var parwinheight = $(window).height();
			$("#leftButton,#rightButton").hover(function(){
				$(this).removeClass("transparent_0");
				$(this).addClass("transparent_class");
			},function(){
				$(this).removeClass("transparent_class");
				$(this).addClass("transparent_0");
			});
			$(".subtab").tabSwitch("create", {type: "slide", height: parwinheight-5, width: parwinwidth-5},function(){
				
			});
			
			
			
			
			
			$.getJSON("account_getUser.do",null,function(json){
				userJson = json;	
				wpindex = userJson.wallPaper;
				if(userJson.photo!=null&&userJson.photo!=""){
					$("#bighead").attr("src","../"+userJson.photo);
					$("#crop_preview").attr("src","../"+userJson.photo);
					
					
					
				}
				
				$("#photo").uploadify({
	                uploader: "js/uploadify.swf",
	                script: "account_editPhoto.do?id="+userJson.id,
	                cancelImg: "css/cancel.png",
	                fileDataName : "photo",
	                auto: true,
	                multi: false,
	                sizeLimit:2048000,
	                fileDesc:"jpg",
	                fileExt:"*.jpg",
	                width:70,
	                height:20,
	                onComplete:function(){
	                	$.getJSON("account_getUser.do",null,function(json){
	                		userJson = json;
	                		isRealSize = false;
	                		if(userJson.photo!=null&&userJson.photo!=""){
	                			
	                			var jcrop_api = $.Jcrop("#bighead");
	                			jcrop_api.destroy();
	                			//jcrop_api.setImage("../"+userJson.photo);
	                			//$("#bighead").hide();
	                			$("#bighead").css("width","");
	                			$("#bighead").css("height","");
	                			$("#bighead").attr("src","../"+userJson.photo);
								$("#crop_preview").attr("src","../"+userJson.photo);
								
							}	
	                		
	                	});
	                }
	            });
	            
	           
			});
			
		});
		
		function uploadPic(){
			$("#photo").uploadifyUpload();
		}
		
		function showPreview(coords){
			$("#x").val(coords.x);
			$("#y").val(coords.y);
			$("#w").val(coords.w);
			$("#h").val(coords.h);
	        if(parseInt(coords.w) > 0){
	            //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
	            var rx = 64 / coords.w; 
	            var ry = 64 / coords.h;
	            //通过比例值控制图片的样式与显示
	            $("#crop_preview").css({
	                width:Math.round(rx * $("#bighead").width()) + "px",	//预览图片宽度为计算比例值与原图片宽度的乘积
	                height:Math.round(rx * $("#bighead").height()) + "px",  //预览图片高度为计算比例值与原图片高度的乘积
	                marginLeft:"-" + Math.round(rx * coords.x) + "px",
	                marginTop:"-" + Math.round(ry * coords.y) + "px"
	            });
	        }
	    }

		function refresh(){
			var winheight = $(window).height();
			var winwidth = $(window).width();
			$("#bodydiv").css("height",winheight);
			$(".subtab").css("height",winheight-5);
			
		}
		
		function changeTab(num){
			var tmp = tabnum + num;
			
			if(tmp < 0|| tmp > maxtabnum){
				return;
			}
			tabnum = tmp;
			
			$(".subtab").tabSwitch("moveTo",{index: tabnum},function(){
					
			});
		}
		
		function changeShowimg(index){
			//$("#showimg").attr("src","../wallpaper/"+index+".jpg");
			wpindex = index;
			var l = 0-480*(index-1);
			$("#imgbox").animate({marginLeft:l},300);
			
		}
		
		function changeMiniimg(index){
			var tmp = mininum + index;
			if(tmp<1||tmp>(maxmininum-3)){
				return;
			}
			mininum = tmp;
			var l = 0-100*(mininum-1);
			$("#miniimgbox").animate({marginLeft:l},300);
		}
		
		function saveWP(){
			//wpindex
			var path = "url(wallpaper/"+wpindex+".jpg)";
			window.parent.modifyWallpaper(path);
			$.get("account_editWallPaper.do",{id:userJson.id,wallPaper:wpindex},function(data){
					
			});
		}
	
		function realSize(obj){
			if(isRealSize){
				return;
			}
			var imgw = parseInt($(obj).css("width").replace("px",""));
			var imgh = parseInt($(obj).css("height").replace("px",""));
			realWidth = imgw;
			realHeight = imgh;
			if(imgw!=0&&imgh!=0){
				if(imgw>imgh){
					$(obj).css("width",350);
					$(obj).css("height",350*(imgh/imgw));
				}else{
					$(obj).css("height",350);
					$(obj).css("width",350*(imgw/imgh));
				}
				
				$(obj).Jcrop({
					onChange:showPreview,
	        		onSelect:showPreview,
	        		aspectRatio:1
				});
				
				isRealSize = true;
			}
		}
		
		function zoomImg(){
			var x=$("#x").val();
			var y=$("#y").val();
			var w=$("#w").val();
			var h=$("#h").val();
			
			if(realWidth>realHeight){
				var w1 = (parseFloat(realWidth)/350);
				var y1 = (parseFloat(realHeight)/(350*(realHeight/realWidth)));
				x = parseInt(parseFloat(x) * w1);
				y = parseInt(parseFloat(y) * y1);
				
				w = parseInt(parseFloat(w) * w1);
				h=w;
			}else{
				var w1 = (parseFloat(realHeight)/350);
				var y1 = (parseFloat(realWidth)/(350*(realWidth/realHeight)));
				x = parseInt(parseFloat(x) * w1);
				y = parseInt(parseFloat(y) * y1);
				
				w = parseInt(parseFloat(w) * w1);
				h=w;
			}
			$.get("account_drawPhoto.do",{x:x,y:y,w:w,h:h},function(data){
				if(data=="success"){
					window.parent.updateHeadImg();
				}
			});
			
		}
		
	</script>
</head>
<body style="width:100%;margin-left:0px;margin-top:0px;">
	<div id="bodydiv" style="background:url(../image/bg/16.png);color:#fff;">
		<div id="tabscontent" >
			<div id="tab-1" class="subtab">
				<div class="tabtitle">更换壁纸<img onclick="saveWP();" title="保存壁纸" src="../image/cover/system/white/MB_0008_save.png" style="width:22px;height:22px;cursor:pointer;padding-left:10px;padding-top:20px;" /></div>
				<div style="float:left;width:100%;height:300px;padding-left:110px;">
					<div style="float:left;width:480px;height:270px;overflow:hidden;">
						<div id="imgbox" style="float:left;width:6000px;height:270px;overflow:hidden;">
							<img id="showimg_1" src="../wallpaper/1.jpg" class="imgbig" border="0"/>
							<img id="showimg_2" src="../wallpaper/2.jpg" class="imgbig" border="0"/>
							<img id="showimg_3" src="../wallpaper/3.jpg" class="imgbig" border="0"/>
							<img id="showimg_4" src="../wallpaper/4.jpg" class="imgbig" border="0"/>
							<img id="showimg_5" src="../wallpaper/5.jpg" class="imgbig" border="0"/>
							<img id="showimg_6" src="../wallpaper/6.jpg" class="imgbig" border="0"/>
							<img id="showimg_7" src="../wallpaper/7.jpg" class="imgbig" border="0"/>
						</div>
						
					</div>
					
				</div>
				<div style="float:left;width:100%;height:50px;">
					<div style="float:left;width:30px;padding-left:110px;padding-top:13px;"><img title="上一个" src="image/left.png" class="imgIcon1" onclick="changeMiniimg(-1);"/></div>
					<div style="float:left;width:400px;height:50px;padding-left:10px;overflow:hidden;">
						<div id="miniimgbox" style="float:left;width:3000px;height:50px;overflow:hidden;">
							<img id="mini_1" src="../wallpaper/mini1.jpg" class="imgmini" onclick="changeShowimg(1)" style="padding-left:0px;"/>
							<img id="mini_2" src="../wallpaper/mini2.jpg" class="imgmini" onclick="changeShowimg(2)" />
							<img id="mini_3" src="../wallpaper/mini3.jpg" class="imgmini" onclick="changeShowimg(3)" />
							<img id="mini_4" src="../wallpaper/mini4.jpg" class="imgmini" onclick="changeShowimg(4)" />
							<img id="mini_5" src="../wallpaper/mini5.jpg" class="imgmini" onclick="changeShowimg(5)" />
							<img id="mini_6" src="../wallpaper/mini6.jpg" class="imgmini" onclick="changeShowimg(6)" />
							<img id="mini_7" src="../wallpaper/mini7.jpg" class="imgmini" onclick="changeShowimg(7)" />
						</div>
						
					</div>
					<div style="float:left;width:30px;padding-left:10px;padding-top:13px;"><img title="下一个" src="image/right.png" class="imgIcon1" onclick="changeMiniimg(1);"/></div>
				</div>
				
			</div>
			<div id="tab-2" class="subtab" >
				<div class="tabtitle">修改头像</div>
				
				<div style="float:left;width:430px;padding-left:60px;">
					<img id="bighead" src="../wallpaper/2.jpg" style="" onload="realSize(this);"/>
				</div>
				<div style="float:left;width:150px;height:350px;">
					<div style="float:left;width:70px;height:70px;overflow:hidden;">
						<img id="crop_preview" src="../wallpaper/2.jpg" style="width:70px;height:70px;" />
					</div>
					<div title="更换头像" style="float:left;width:150px;height:30px;background:url(image/xztx.png) no-repeat;">
	                    <input type="file" name="photo" id="photo" />
					</div>
					<div style="float:left;width:150px;">
						<input type="hidden" id="x" name="x" />
	                    <input type="hidden" id="y" name="y" />
	                    <input type="hidden" id="w" name="w" />
	                    <input type="hidden" id="h" name="h" />
						<input type="button" value="确认剪裁" id="crop_submit" onclick="zoomImg();" />
					</div>
				</div>
				
			</div>
			<div id="tab-3" class="subtab">
				<div class="tabtitle">内容定制</div>
			</div>
			
		</div>
		<div id="leftButton" class="leftButton transparent_0" onclick="changeTab(-1);"><img title="上一个" src="image/left.png" /></div>
		<div id="rightButton" class="rightButton transparent_0" onclick="changeTab(1);"><img title="下一个" src="image/right.png" /></div>
		
	</div>
	
	
	
</body>
</html>